---
layout: default
title: Articles
description: "Start Bootstrap news, articles, guides, and tutorials"
meta-title: "Articles"
meta-description: "Start Bootstrap's official blog and article database. A great place to find Bootstrap tips, guides, and tutorials and the latest updates to Start Bootstrap!"
---
<!-- Page Content -->
<div class="container">
	<ol class="breadcrumb breadcrumb-post">
		<li><a href="/">Start Bootstrap</a></li>
		<li class="active">{{ page.title }}</li>
	</ol>
</div>

<div class="container">

	<div class="row">

		<div class="col-md-8">

			<div class="post-previews">
				{% for post in paginator.posts %}
				<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
				<div class="author text-muted">by {{ post.author }}</div>
				<div class="category text-muted"><i class="icon-tag"></i> {{ post.category }}</div>
				<div class="date text-muted"><i class="icon-clock"></i> {{ post.date | date: "%b %-d, %Y" }}</div>		
				{% endfor %}
			</div>

			{% if paginator.total_pages > 1 %}
			<ul class="pagination">
				{% if paginator.previous_page %}
				<li>
					<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
				</li>
				{% else %}
				<li class="disabled">
					<a href="#" disabled>&laquo; Prev</a>
				</li>
				{% endif %}

				{% for page in (1..paginator.total_pages) %}
				{% if page == paginator.page %}
				<li class="disabled">
					<a href="#">{{ page }}</a>
				</li>
				{% elsif page == 1 %}
				<li>
					<a href="/articles/">{{ page }}</a>
				</li>
				{% else %}
				<li>
					<a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
				</li>
				{% endif %}
				{% endfor %}

				{% if paginator.next_page %}
				<li>
					<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
				</li>
				{% else %}
				<li class="disabled">
					<a href="#">Next &raquo;</a>
				</li>
				{% endif %}

				{% endif %}
			</ul>

		</div>

		<div class="col-md-4">
			<div class="carbon-post">
				{% include ad.html %}
			</div>
		</div>

	</div>

</div>